<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Videos</title>
    <style>
        /* 新增视频容器样式 */
        #videos-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px; /* 视频间距 */
            margin-top: 20px;
        }

        .video-item {
            width: 320px; /* 固定宽度 */
            background-color: #f8f9fa;
            border-radius: 6px;
            overflow: hidden; /* 确保视频不超出容器 */
            box-shadow: 0 3px 6px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .video-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
        }

        .video-item video {
            width: 100%; /* 视频宽度填满容器 */
            height: 180px; /* 固定高度 */
            display: block;
            background: #000; /* 视频加载前的背景色 */
        }

        .video-info {
            padding: 10px;
            font-size: 14px;
            color: #495057;
        }
    </style>
</head>
<body>
<h1>Videos</h1>

<!-- 文件上传表单保持不变 -->
<form id="videoUploadForm">
    <input type="file" name="file" accept="video/*" required>
    <input type="hidden" name="type" value="video">
    <input type="submit" value="Upload Video">
</form>

<!-- 修改视频容器 -->
<div id="videos-container"></div>

<script>
    document.getElementById('videoUploadForm').addEventListener('submit', function(event) {
        event.preventDefault();
        const formData = new FormData(this);
        fetch('/media/upload', {
            method: 'POST',
            body: formData
        })
        .then(response => response.text())
        .then(data => {
            alert(data);
            // 重新获取视频列表
            fetch('/media?type=video')
            .then(response => response.json())
            .then(data => {
                renderVideos(data);
            });
        });
    });

    // 初始加载视频列表
    fetch('/media?type=video')
    .then(response => response.json())
    .then(data => {
        renderVideos(data);
    });

    // 新增：视频渲染函数
    function renderVideos(videos) {
        const container = document.getElementById('videos-container');
        container.innerHTML = '';

        videos.forEach(video => {
            const item = document.createElement('div');
            item.className = 'video-item';

            const videoElement = document.createElement('video');
            videoElement.src = video.url;
            videoElement.controls = true;

            // 添加视频信息区域（可选）
            const info = document.createElement('div');
            info.className = 'video-info';
            info.textContent = video.name || 'Uploaded video';

            item.appendChild(videoElement);
            item.appendChild(info);
            container.appendChild(item);
        });
    }
</script>
</body>
</html>
